<template>
	<!-- 合伙人 -->
	<view class="centent">
		<!-- <lime-barrage /> -->
		<view class="topImg">
			<view class="levelUp">
				<image src="../../static/partner/partner1.png" mode="widthFix"></image>
			</view>

			<view class="title">
				<image src="../../static/partner/partner2.png" mode="widthFix"></image>
			</view>
			<view class="bgImg">
				<image src="../../static/partner/partner3.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="dataScreen">
			<view class="title">
				选品打造爆款，服务您的私域社群
			</view>
			<view class="dataGroup">
				<view class="partnerNum groupItem">
					<view class="num">
						<view class="left">
							120
						</view>
						<view class="right">
							家
						</view>
					</view>
					<view class="txt">
						开店合伙人
					</view>
				</view>
				<view class="sellNum groupItem">
					<view class="num">
						<view class="left">
							360
						</view>
						<view class="right">
							万
						</view>
					</view>
					<view class="txt">
						累计销售额
					</view>
				</view>
				<view class="customNum groupItem">
					<view class="num">
						<view class="left">
							14800
						</view>
						<view class="right">
							人
						</view>
					</view>
					<view class="txt">
						用户总数量
					</view>
				</view>
			</view>
		</view>
		<view class="platform">

		</view>
		<view class="global">

		</view>
		<lff-barrage ref="lffBarrage"></lff-barrage>
		<view class="publicize">
			<view class="personInfo">
				<view class="avatar">
					<image src="../../static/partner/avatar6.jpg" mode="">
					</image>
				</view>
				<view class="income">
					<view class="txt">
						累计收益
					</view>
					<view class="sell">
						<view class="">
							￥
						</view>
						<view class="num">
							20
						</view>
						<view class="txt">
							万
						</view>
					</view>
				</view>
				<view class="user">
					<view class="name">
						小苹果
					</view>
					<view class="age">
						35岁/全职宝妈
					</view>
				</view>
			</view>
			<view class="mark">
				<image src="../../static/partner/partner8.png" mode=""></image>
				我利用淘宝店积累的粉丝做社群团购，通过美传平台，经常在宝妈群里种草物美价廉的好货，宝妈们非常喜欢帮我推荐会员，我也可以得到不少佣金呢。
			</view>

		</view>
		<view class="applyFor" @click="goApply">
			立即申请
		</view>
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				lffArr: [{
						name: '小苹果',
						sell: 2400,
						url:'../../static/partner/avatar1.png'
					},
					{
						name: '布呐呐',
						sell: 1222,
						url:'../../static/partner/avatar2.jpg'
					}, {
						name: '敖润汁',
						sell: 2468,
						url:'../../static/partner/avatar3.png'
					}, {
						name: '粗莓',
						sell: 130,
						url:'../../static/partner/avatar4.png'
					}, {
						name: '老登',
						sell: 300,
						url:'../../static/partner/avatar5.png'
					}
				],
				value: '',
				barrageData: [],
				intervalOne: null,
				intervalTwo: null,
			};
		},
		methods: {
			goApply() {
				uni.navigateTo({
					url: "/pages/partnerApply/partnerApply"
				})
			},
			colrdo() { //插入一条弹幕
				let that = this
				let a = []
				let b = this.lffArr
				let index = 0
				// this.lffArr.map((items) => {

				// 	this.$refs.lffBarrage.add({
				// 		item: items,
				// 		status: 'reuse'
				// 	});
				// })
				// 定义一个函数来插入元素
				function insertFromBToA() {
					if (index < b.length) {
						// a.push(b[index]); // 将b中当前索引的元素插入到a中
						that.$refs.lffBarrage.add({
							item: b[index],
							// sell: b[index].sell,
							status: 'reuse'
						});
						// console.log(a); // 打印当前a数组的状态（可选）
						index++; // 索引自增
					} else {
						index = 0
						a = []
						// 如果已经插入了所有元素，则清除定时器
						clearInterval(that.intervalTwo);
						console.log("所有元素已插入到a数组");
					}
				}
				// 设置定时器，每隔1秒调用一次insertFromBToA函数
				this.intervalTwo = setInterval(insertFromBToA, 1000);
			},
			onFire() {
				if (this.value) {
					this.barrageData.push({
						text: this.value
					})
					this.value = ''
				}
			}
		},
		mounted() {
			this.colrdo()
			this.onFire()
			this.intervalOne = setInterval(() => {
				this.colrdo()
				// }, (this.lffArr.length + 1)*1000)
			}, (this.lffArr.length + 2) * 1000)
			// this.$nextTick(()=>{
			// })
		},
		beforeDestroy() {
			clearInterval(this.intervalOne)
			clearInterval(this.intervalTwo)
		},
		onHide() {
			clearInterval(this.intervalOne)
			clearInterval(this.intervalTwo)
		}

	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.centent {
		width: 100%;
		// height: 100vh;
		background-color: #FCE3C4;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		position: relative;

		.topImg {
			width: 85%;
			// height: 520rpx;
			// background-color: coral;
			margin: 0rpx auto;

			.levelUp {
				width: 300rpx;
				// height: 70rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					// height: 100%;
					display: flex;
				}
			}

			.title {
				width: 90%;
				// height: 65rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					// height: 100%;
					display: flex;
				}
			}

			.bgImg {
				width: 90%;
				// height: 350rpx;
				margin: 0 auto;

				// margin-bottom: 20rpx;
				image {
					width: 100%;
					// height: 100%;
					display: flex;
				}
			}
		}

		.dataScreen {
			width: 90%;
			height: 300rpx;
			// background-color: coral;
			background-image: url("../../static/partner/partner4.png");
			background-size: 100% 100%;
			margin: 0rpx auto;
			margin-top: 40rpx;
			position: relative;

			.title {
				text-align: center;
				position: absolute;
				left: 0;
				right: 0;
				top: 12rpx;
				// bottom: 0;
				// margin: auto;
				color: #5A3111;
				font-weight: bold;
				font-size: 28rpx;
				letter-spacing: 1rpx;
			}

			.dataGroup {
				position: absolute;
				// top: 0;
				left: 0;
				right: 0;
				bottom: 50rpx;
				margin: auto;
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.groupItem {
					text-align: center;
					width: 33%;

					.num {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #F43D18;
						margin-bottom: 10rpx;
						font-weight: bold;

						.left {
							font-size: 50rpx;
						}

						.right {
							margin-top: 10rpx;
							font-size: 25rpx;
						}
					}

					.txt {
						font-size: 25rpx;
						color: #5A3111;
						font-weight: bold;
					}
				}
			}
		}

		.platform {
			width: 90%;
			height: 350rpx;
			// background-color: coral;
			background-image: url('../../static/partner/partner5.png');
			background-size: 100% 100%;
			margin: 0rpx auto;
			margin-top: 40rpx;
		}

		.global {
			width: 90%;
			height: 250rpx;
			// background-color: coral;
			background-image: url('../../static/partner/partner6.png');
			background-size: 100% 100%;
			margin: 0rpx auto;
			margin-top: 40rpx;
		}

		.publicize {
			width: 90%;
			height: 550rpx;
			background-color: #FEF5E6;
			margin: 0rpx auto;
			margin-top: 40rpx;
			border-radius: 20rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.personInfo {
				width: 55%;
				height: 50%;
				margin: 0 auto;
				// margin-bottom: 40rpx;
				padding-bottom: 40rpx;
				position: relative;

				.avatar {
					position: absolute;
					bottom: 25%;
					left: 0;
					width: 140rpx;
					height: 140rpx;

					image {
						width: 100%;
						height: 100%;
						border: 8rpx solid #fff;
						border-radius: 50%;
					}
				}

				.income {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #fff;
					position: absolute;
					background: url("../../static/partner/partner7.png") no-repeat top center;
					background-size: 100% 100%;
					width: 145rpx;
					height: 100rpx;
					top: 0;
					right: 0;
					// bottom: 0;
					left: 5%;
					// bottom: 0;
					margin: auto;
					padding-bottom: 10rpx;

					.txt {
						font-size: 23rpx;
						letter-spacing: 1rpx;
					}

					.sell {
						display: flex;
						align-items: flex-end;
						justify-content: center;
						font-size: 23rpx;
						letter-spacing: 1rpx;

						.num {
							margin: 0 4rpx;
							font-size: 30rpx;
						}
					}
				}

				.user {
					position: absolute;
					bottom: 30%;
					right: 0;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.age {
						color: #5A3111;
						font-size: 25rpx;
					}
				}
			}

			.mark {
				width: 100%;
				height: 50%;
				padding-top: 40rpx;
				border-top: 1px solid #5A3111;
				color: #5A3111;
				letter-spacing: 3rpx;
				line-height: 50rpx;

				image {
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}
			}


		}

		.applyFor {
			width: 90%;
			margin: 0rpx auto;
			margin-top: 40rpx;
			padding: 28rpx 0;
			text-align: center;
			border-radius: 20rpx;
			background-image: linear-gradient(to right, #FF2928, #FD6F2B);
			color: #fff;
			border: 5rpx solid #fff;
		}
	}
</style>
